<template>
    <div class="login-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>用户登录</span>
        </div>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          auto-complete="on"
          label-position="right"
        >
          <el-form-item prop="username" label="用户名" label-width="80px"
            ><el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="请输入用户名"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item prop="password" label="密码" label-width="80px"
            ><el-input
              ref="password"
              v-model="loginForm.password"
              placeholder="请输入密码"
              name="password"
              type="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <el-form-item prop="remember-me" label="自动登录" label-width=" 80px "
            ><el-checkbox
              v-model="loginForm['remember-me']"
              name="remember-me"
              checked
            />
          </el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            style="width: 100%; margin-bottom: 30px"
            @click.native.prevent="handleLogin"
            >登录</el-button
          >
        </el-form></el-card
      >
    </div>
  </template>

<script>
import { METHOD, request } from '@/utils/request'
import { Message } from 'element-ui'
export default {
  name: 'MyLogin',
  data () {
    return {
      loginForm: { username: '', password: '', 'remember-me': '' },
      loginRules: {
        username: [{ required: true, trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    handleLogin () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const data = {}
          //   data.append('username', this.loginForm.username)
          //   data.append('password', this.loginForm.password)
          data.username = this.loginForm.username
          data.password = this.loginForm.password
          const params = JSON.stringify(data)
          //   data.append('remember-me', this.loginForm['remember-me'])
          request('/api/login', METHOD.POST, params)
            .then((resp) => {
              if (resp.status === 200) {
                Message({
                  message: '登录成功!',
                  type: 'success',
                  duration: 5 * 1000
                })
                // 登录成功后跳转到首页
                location.replace('/')
              }
            })
            .finally(() => (this.loading = false))
        }
      })
    }
  }
}
</script>

  <style>
  .login-container {
    width: 400px;
    margin: 100px auto;
  }
  </style>
